<%@ page import="com.zwxbc.funplay.service.GameCategoryService" %>
<%@ page import="com.zwxbc.funplay.service.impl.GameCategoryServiceImpl" %>
<%@ page import="com.zwxbc.funplay.entity.GameCategory" %>
<%@ page import="java.util.List" %>
<%@ page import="com.zwxbc.funplay.entity.Game" %>
<%@ page import="com.zwxbc.funplay.service.impl.GameServiceImpl" %>
<%@ page import="com.zwxbc.funplay.entity.Player" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/11
  Time: ฅ(΅•ㅅ•΅❀)ฅ 15:06
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
	<title>商店</title>
	<style>
		.custom-btn:hover {
			background-color: transparent;
		}
	</style>

<%--  	<script src="../../js/jquery.min.js"></script> --%>
<%-- 	<script> --%>
<%-- 		// 解决无法使用下拉框问题 --%>
<%-- 		let $j = jQuery.noConflict(); --%>
<%-- 	</script> --%>
	<link rel="stylesheet" href="<c:url value="/css/bootstrap.min.css"/>">
	<script src="<c:url value="/js/bootstrap.bundle.min.js"/>"></script>
	<script src="<c:url value="/js/bootstrap.min.js"/>"></script>
</head>
<body>
<%--<%@ include file="/view/common/header.jsp" %>--%>
<jsp:include page="/view/common/header.jsp"></jsp:include>
<main>
	<div class="album py-5 bg-light">
		<div class="container">

			<div class="p-3 mb-3 border-bottom">
				<div class="container">

					<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start" style="margin-top: -20px">
						<a href="#" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
							<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
						</a>

						<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
							<li><a href="store.jsp" class="nav-link px-2 link-dark">所有游戏</a></li>
							<%
								List<GameCategory> gameCategoryList = new GameCategoryServiceImpl().getGameCategoryList();
								for (GameCategory gameCategory : gameCategoryList) {
							%>
							<li><a href="store.jsp?categoryId=<%= gameCategory.getCategoryId() %>" class="nav-link px-2 link-dark"><%= gameCategory.getCategoryName() %></a></li>
							<%
								}
							%>
						</ul>

						<div class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-3 d-flex align-items-center" style="padding-top: 17px">
							<form class="input-group" role="search" action="store.jsp" method="get">
								<input type="search" class="form-control" placeholder="搜索游戏..." aria-label="Search" name="gameName">
								<button type="submit" class="btn btn-outline-secondary custom-btn border-0">
									<img src="<c:url value='/img/common/search.png'/>" alt="Search" width="16px" height="16px">
								</button>
							</form>
						</div>

					</div>
				</div>
			</div>

			<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
				<%
					// 获取传递的categoryId
					String categoryId = request.getParameter("categoryId");
					// 获取传递的游戏名和游戏分类
					String gameName = request.getParameter("gameName");


					// 根据游戏名和游戏分类进行模糊查询
					List<Game> gameList;
					if (gameName != null && !gameName.isEmpty()) {
						gameList = new GameServiceImpl().getGameListByNameLike(gameName);
					} else if (categoryId != null) {
						gameList = new GameServiceImpl().getGameListByCategoryId(Long.valueOf(categoryId));
					} else {
						// 如果没有输入游戏名且没有选择游戏分类，则获取所有游戏列表
						gameList = new GameServiceImpl().getGameList();
					}
					pageContext.setAttribute("gameList", gameList);
				%>
				<c:forEach var="game" items="${gameList}">
					<div class="col">
						<div class="card shadow-sm">
							<img class="bd-placeholder-img card-img-top" width="100%" height="225" src="<c:url value='/img/game/${game.getGameImage()}'/>" alt="game">
							<div class="card-body">
								<h4 class="card-title font-weight-bold">${game.getGameName()}</h4>

								<!-- 游戏信息 -->
								<div class="mt-3">
									<p class="card-text">销量: ${game.getSalesCount()}份</p>
									<p class="card-text">价格: ${game.getPrice()}￥</p>
									<p class="card-text">评分: ${game.getAverageRating()}
										<div class="progress">
											<div class="progress-bar" role="progressbar" style="width: ${(game.getAverageRating() / 5) * 100}%" aria-valuenow="${game.getAverageRating()}" aria-valuemin="0" aria-valuemax="5"></div>
										</div>
									</p>
								</div>

								<c:if test="${empty sessionScope.user}">
									<div class="d-flex justify-content-between align-items-center mt-3">
										<div class="btn-group">
											<button type="button" class="btn btn-sm btn-outline-secondary">添加到愿望单</button>
											<!-- 通过 JavaScript 实现购买按钮的跳转 -->
											<button type="button" class="btn btn-sm btn-outline-secondary" onclick="login(${game.gameId})">购买</button>
										</div>
									</div>
								</c:if>
								<c:if test="${not empty sessionScope.user}">
									<div class="d-flex justify-content-between align-items-center mt-3">
										<div class="btn-group">
											<button type="button" class="btn btn-sm btn-outline-secondary">添加到愿望单</button>
											<!-- 通过 JavaScript 实现购买按钮的跳转 -->
											<button type="button" class="btn btn-sm btn-outline-secondary" onclick="redirectToGameInfo(${game.gameId})">购买</button>
										</div>
									</div>
								</c:if>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
</main>
<jsp:include page="/view/common/footer.jsp"></jsp:include>
<script>
	function redirectToGameInfo(gameId) {
		let url = '<c:url value="/view/player/gameInfo.jsp"/>';
		window.location.href = url + '?gameId=' + gameId;
	}
	function login(gameId) {
		let url = '<c:url value="/view/player/playerLogin.jsp"/>';
		window.location.href = url + '?gameId=' + gameId;
	}
</script>
</body>
</html>
